import React from "react";
import {Button, Upload, Table, Modal, Form, Icon, notification, InputNumber} from "antd";
import ViewTitle from "../../../components/ViewTitle";
import notify from "../../../components/NotificationExtra";
import {connect} from "dva";
import ComponentBase from "../../../components/Base/ComponentBase";
import {FormField, FormLayout, ModalFooter} from "antd-extra";
import TextArea from "antd/es/input/TextArea";

@Form.create()
@connect(({global, user, dict}) => ({...global, ...user, ...dict}))
export default class ModalUploadPic extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {};
    const {record} = this.props;
    if (record) {
      const {fileList, memo} = record;
      this.state.fileList = fileList;
      this.state.memo = memo;
    }
  }

  renderFoot = () => {
    const {foot, value, modalRef, callback, form} = this.props;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                notify({type: 'error', message: '有必填项未填写！'});
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              // _.merge(values, this.state);
              _.map(values, (value, key) => {
                if (value && value.toString().toLowerCase() === 'nan') {
                  values[key] = undefined;
                }
              });
              _.merge(values, this.state);
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  picHandleCancel = () => this.setState({previewVisible: false});
  picHandlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
      console.log(file.preview);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };
  picHandleChange = ({fileList}) => {
    _.map(fileList, async file => {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
    });
    const temp = this.state;
    temp.fileList = fileList;
    this.setState({...temp});
  };

  render() {
    const {previewVisible, previewImage, fileList = [],memo} = this.state;
    const {form} = this.props;
    const uploadPicButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    return (
      <div>
        <ViewTitle
          title={'附件'}
        ></ViewTitle>
        {
          //上传图片
          <div style={{marginLeft: '128px'}}>
            <Upload
              action={'http://127.0.0.1:18008/api/global/upload?type=inboundLot'} // 没有用，直接存图片流文件
              listType="picture-card"
              fileList={fileList}
              accept={".png,.jpg"}
              onPreview={this.picHandlePreview}
              onChange={this.picHandleChange}
              onDownload={file => {
                console.log('ondownlad', file);
              }}
              beforeUpload={(file, fileList) => {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                  notify({type: 'error', message: '文件过大！'});
                  return isLt2M;
                }
                return false;
              }}
            >
              {uploadPicButton}
            </Upload>
            <Modal visible={previewVisible} footer={null} onCancel={this.picHandleCancel}>
              <img alt="example" style={{width: '100%'}} src={previewImage}/>
            </Modal>
            <FormLayout form={form} cols={1}>
              <FormField
                label={"备注"}
                name={'memo'}
                initialValue={memo}
              >
                <TextArea
                ></TextArea>
              </FormField>
            </FormLayout>
          </div>
        }
        {this.renderFoot()}
      </div>
    );
  }
}



